<template>
  <div class="main">
      <!-- 头部栏 -->
      <div class="headnav">
          <span class="iconfont iconnew"></span>
          <div class="ipt">
              <span class="iconfont iconsearch"></span>
              <span class="text" >搜索新闻</span>
          </div>
          <span class="iconfont iconwode" @click="$router.push('/personal')"></span>
      </div>
      <div class="tab">
          <van-tabs v-model="active" sticky>
              <van-tab v-for="(value,index) in categorylist" :title="value.name" :key='index'>
                     <van-list
                     @load="onLoad"
                     :immediate-check="false"
                     v-model="value.loading"
                     :finished="value.finished"
                     finished-text="不要拉拉扯扯了，我也是有底线的人啊"
                     >
              <div v-for="(value,index) in value.postlist" :key='index'>
             <postItem :data='value'></postItem>
              </div> 
                 </van-list>
             </van-tab>
       </van-tabs>
      </div>
      <!-- 栏目列表栏 -->
      
  </div>
</template>

<script>
import postItem from '../components/postItem'
export default {
    data(){
        // 引入变量，active
        return{
            active:0,
            categorylist:[],
            // postlist:[]，因为这里已经把点击到的文章放入到列表中，所以不需要声明文章列表的存在
        }
    },
    watch:{
        // 监听每个active，当点击到每个不一样的active的时候，显示不同active得到的文章列表
       active(){
           this.getpost()
       }
    },
    methods:{
        onLoad(){
          this.categorylist[this.active].pageIndex+=1;
          this.getpost()
        },
        // 封装获取文章的封装函数
      getpost(){
          this.$axios({
              url:'/post',
              params:{
                  category:this.active,
                  pageIndex:this.categorylist[this.active].pageIndex,
                  pageSize:this.categorylist[this.active].pageSize
              }
          }).then(res=>{
              console.log(res);
              const {data} =res.data
            //   this.postlist=res.data.data
              this.categorylist[this.active].postlist=[
                  ...this.categorylist[this.active].postlist,
                  ...data
              ];
              this.categorylist[this.active].loading=false
              if(data.length<this.categorylist[this.active].pageSize){
                  this.categorylist[this.active].finished=true
              }
          })
      }
    },
    components:{
        // 注册引入的组件
       postItem
    },
   // 当页面加载的时候，发起得到栏目列表的请求
   created(){
        this.$axios({
            url:'/category',
        }).then(res=>{
            // console.log(res);
            this.categorylist=res.data.data.map(item=>{
                // 循环遍历出整个categorylist，并且将其散开，并且得到一个空的文章列表数组
               return{
                   ...item,
                   postlist:[],
                   pageIndex: 1,
                   pageSize: 6,
                   loading: false,
                   finished: false,
               }
            })
        })
    }

}
</script>

<style lang="less" scoped>
.main {
    .headnav{
        padding: 2/360*100vw 15/360*100vw;
        height: 49/360*100vw;
        background-color: #ff0000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .iconnew{
            font-size: 54/360*100vw;
            color: #ffffff;
        }
        .ipt{
            width: 210/360*100vw;
            height: 38/360*100vw;
            background-color: rgba(225, 225, 225, 0.4);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius:19/360*100vw;
             color: #ffffff;
            .iconsearch{
                font-size: 18/360*100vw;            
                margin-right: 5px;
            }
            .text{
                font-size: 16/360*100vw;
            }
        }
        .iconwode{
            font-size: 32/360*100vw;
            color: #ffffff;
        }

    }
}
</style>